<script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {deleteNoteByNidAPI, getNoteDetailAPI, getNotesByUidAPI} from "@/apis/notes";
  import {useUserStore} from "@/stores/user";
  import PostNote from '@/views/common/postNote.vue'

  const router = useRouter()

  // 响应式数据
  const posts = ref([
    
  ])
  const total = ref(0)
  const pageSize = ref(10)
  const currentPage = ref(1)

  // 添加响应式数据
  const showEditDialog = ref(false)
  const editingPost = ref({})
  const postNoteRef = ref()
  const loading = ref(false)

  // 获取帖子列表
  const fetchPosts = async () => {
    loading.value = true
    try {
      const response = await getNotesByUidAPI(useUserStore().getUserInfo().uid)
      posts.value = response.data
      total.value = response.data.length
    } catch (error) {
      ElMessage.error('获取帖子列表失败')
    } finally {
      loading.value = false
    }
  }

  // 修改编辑帖子方法
  const editPost = async (nid) => {
      const res = await getNoteDetailAPI(nid)
      if (res.code === '200') {
        editingPost.value = res.data
        showEditDialog.value = true
      }else{
      ElMessage.error('获取帖子详情失败')
    }
  }

  const handleClose = (done) => {
    ElMessageBox.confirm('确认关闭？')
      .then(() => {
        done()
      })
      .catch(() => {})
  }

  const onEditSuccess = () => {
    showEditDialog.value = false
    fetchPosts() // 刷新列表
    ElMessage.success('编辑成功')
  }

  // 删除帖子
  const deletePost =(nid) => {
    ElMessageBox.confirm('确认删除这篇帖子吗？', '提示', {
        type: 'warning'
      }).then(async ()=>{
      await deleteNoteByNidAPI(nid).then(res=>{
        if(res.code==='200'){
          ElMessage.success('删除成功')
          fetchPosts()
        }else{
          ElMessage.error(res.msg)
        }
      })
    })
  }

  // 格式化日期
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString()
  }

  // 页码改变
  const handlePageChange = (page) => {
    currentPage.value = page
    fetchPosts()
  }

  // 添加查看帖子方法
  const viewPost = (nid) => {
    router.push(`/post/${nid}`)
  }

  // 生命周期钩子
  onMounted(() => {
    fetchPosts()
  })
  </script>
  <template>
    <div class="my-post-container">
      <!-- 添加 v-loading 指令 -->
      <div v-loading="loading">
        <!-- 帖子列表 -->
        <div class="post-list" v-if="posts.length">
          <div class="post-item" v-for="post in posts" :key="post.id">
            <div class="post-content">
              <h3 class="post-title" @click="viewPost(post.nid)">{{ post.title }}</h3>
              <p class="post-brief">{{ post.describe }}</p>
              <div class="post-meta">
                <span>
                  发布时间：{{ formatDate(post.createdDate) }}
                </span>
              </div>
            </div>
            <div class="post-actions">
              <el-button type="primary" size="small" plain @click="viewPost(post.nid)">
                <i class="el-icon-view"></i> 查看
              </el-button>
              <el-button type="warning" size="small" plain @click="editPost(post.nid)">
                <i class="el-icon-edit"></i> 编辑
              </el-button>
              <el-button type="danger" size="small" plain @click="deletePost(post.nid)">
                <i class="el-icon-delete"></i> 删除
              </el-button>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <el-empty v-else description="暂无帖子"></el-empty>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              @current-change="handlePageChange"
          />
        </div>

        <!-- 编辑弹窗 -->
        <el-dialog
            v-model="showEditDialog"
            title="编辑帖子"
            width="50%"
            :before-close="handleClose"
        >
          <PostNote ref="postNoteRef" :initialData="editingPost" :mode="'edit'"/>
        </el-dialog>
      </div>
    </div>
  </template>
  
  <style lang="scss" scoped>
  .my-post-container {
    padding: 20px;
    background-color: #ffffff;
    height: 100vh;
    display: flex;
    flex-direction: column;
    
    .page-title {
      margin-bottom: 30px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
      text-align: center;
    }
    
    .post-list {
      flex: 1;
      overflow-y: auto;
      padding-right: 10px;
      margin-bottom: 20px;
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-thumb {
        background-color: #dcdfe6;
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-track {
        background-color: #f5f7fa;
      }
      
      .post-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        margin-bottom: 15px;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }
        
        .post-content {
          flex: 1;
          
          .post-title {
            margin: 0 0 10px;
            font-size: 18px;
            color: #303133;
            cursor: pointer;
            transition: color 0.3s;
            
            &:hover {
              color: #409EFF;
            }
          }
          
          .post-brief {
            color: #666;
            margin: 0 0 10px;
            font-size: 14px;
            line-height: 1.6;
            margin: 12px 0;
            color: #606266;
          }
          
          .post-meta {
            color: #999;
            font-size: 14px;
            
            .el-tag {
              margin-right: 12px;
              
              i {
                margin-right: 4px;
              }
            }
          }
        }
        
        .post-actions {
          margin-left: 20px;
          
          .el-button {
            margin-left: 8px;
            
            i {
              margin-right: 4px;
            }
          }
        }
      }
    }
    .pagination-container {
      margin-top: auto;
      padding: 20px 0;
      background-color: #fff;
      border-radius: 4px;
    }
  }
  </style>